<template>
  <div>
    <template  v-for="item in $props.menus">
       <el-menu-item  :index="item.id" :key="item.id" v-if="!item.children" class="clear-menu-arrow">
        <i class="el-icon-folder" v-if ="item.type === 'folder'"></i>
        <i class="el-icon-s-data" v-if ="item.type === 'page'"></i>
        <span slot="title">{{item.name}}</span>
         <span class="text-right tools hidden">
           <more-page-component :id="item.id" @open="openMoreDialog"></more-page-component>
           <plus-page-component :id="item.id" v-if ="item.type === 'folder'" @open="openDialog"></plus-page-component>
        </span>
       </el-menu-item>
      <el-submenu :index="item.id" :key="item.id" v-if="item.children" class="clear-menu-arrow">
        <template slot="title">
          <i class="el-icon-folder" v-if ="item.type === 'folder'"></i>
          <i class="el-icon-s-data" v-if ="item.type === 'page'"></i>
          <span slot="title">{{item.name}}</span>
          <span class="text-right tools hidden">
            <more-page-component :id="item.id" v-if ="item.type === 'folder'" @open="openMoreDialog"></more-page-component>
            <plus-page-component :id="item.id" @open="openDialog"></plus-page-component>
          </span>
        </template>
      <!--  递归构造-->
        <page-menu-tree :menus="item.children"></page-menu-tree>
      </el-submenu>
    </template>
<!--    弹出窗口-->
    <new-folder-dialog v-model="folderVisiable" :folder="folder" @editfolder.native="editFolder"></new-folder-dialog>
  </div>
</template>
<script>
import MorePageComponent from '../subcomponent/MorePageComponent'
import PlusPageComponent from '../subcomponent/PlusPageComponent'
import NewFolderDialog from '../NewFolderDialog'
export default {
  components: {NewFolderDialog, PlusPageComponent, MorePageComponent},
  props: {
    menus: {
      type: Array
    }
  },
  name: 'PageMenuTree',
  data () {
    return {
      pageVisiable: false,
      folderVisiable: false,
      folder: {
        id: 1,
        name: '用户视图',
        folderNo: 99
      }
    }
  },
  methods: {
    /** 打开更多 */
    openMoreDialog (type, id) {
      switch (type) {
        // 新建文件夹
        case 'rename':
          this.folderVisiable = true
          break
        // 移动文件夹
        case 'movetofolder':
          break
        // 删除
        case 'delete':
          this.deleteItem()
          break
      }
    },
    openDialog (data) {
      switch (data.type) {
        // 新建页面
        case 'page':
          this.$router.push({name: 'NewPage'})
          break
        // 新建文件夹
        case 'folder':
          this.folderVisiable = true
          break
      }
    },
    deleteItem () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑完成文件夹回调
    editFolder (folder, id) {
      this.folder = folder
    },
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.page-menu-tree {*/
/*  height: 100%;*/
/*  width: 100%;*/
/*}*/
.page-menu-tree .custom-tree-node{
  height: 40px;
  width: 260px;
  margin-right: 10px;
  text-align: left;
  line-height: 40px;
}
</style>
